<template>
  <view class="list-bg order-other">
    <uni-list class="list-group" :border="false">
      <uni-list-item
        v-for="(item, index) in cellColumn"
        :key="index"
        :border="false"
      >
        <text
          slot="header"
          class="row-header"
        >
          {{ item.label }}
        </text>
        <view
          slot="footer"
          class="row-footer-black"
        >
          <text
            v-for="(fieldItem, fieldIndex) in item.fields"
            :key="fieldIndex"
            class="text-wrap"
            :style="fieldIndex<item.fields.length-1 ? 'margin-right: 10rpx;' : ''"
          >
            {{ cellData[fieldItem] }}
          </text>
          <view
            v-if="item.btn"
            class="text-wrap"
          >
            <button
              v-for="(btnItem, btnIndex) in item.btn"
              :key="btnIndex"
              class="btn-border"
              :type="'default'"
              plain="true"
              @click="handelMethod(btnItem.methodName, cellData[item.fields[0]])"
            >
              {{ btnItem.btnName }}
            </button>
          </view>
          <text v-if="item.showRightIcon" class="slot-image font_family icon-a-arrowright_tongyong_2" />
        </view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  name: 'CellAssembly',
  props: {
    cellColumn: {
      type: Array,
      default: null
    },
    cellData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handelMethod(methodName, objItem) {
      this.$emit('handelCellMethod', methodName, objItem)
    }
  }
}
</script>

<style scoped lang="scss">
.order-other{
  position: relative;
  .btn-order{
    position: absolute;
    top:20rpx;
    right:20rpx;
    padding:0 20rpx;
    height: 48rpx;
    line-height: 44rpx;
    font-size:$uni-font-size-sm;
    color:$uni-orange;
    border-color:$uni-orange;
    border-radius:$uni-border-radius-lg;
  }
}
.row-header{
  display: block;
  width: 120rpx;
  font-size: $uni-font-size-sm;
  color: $uni-grey-999;
}
.row-footer{
  font-size: $uni-font-size-sm;
  color: $uni-orange;
}
.row-footer-black{
  font-size: $uni-font-size-sm;
  .text-wrap{
    float: left;
  }
  .btn-border{
    float: right;
    height: 36rpx;
    line-height: 34rpx;
    color: #333;
    border: 2rpx solid #ddd;
    padding:0 20rpx!important;
    font-size: $uni-font-size-sm;
    /*#ifdef MP-ALIPAY*/
    margin: -6rpx 0 0 10rpx;
    /*#endif*/
    /*#ifdef MP-WEIXIN*/
    margin: 0 0 0 10rpx;
    /*#endif*/
    border-radius:4rpx;
  }
}
.list-group-up-con{
  background:$uni-orange;
  border-radius:6rpx;
  color:#fff;
  margin:8rpx auto 0;
  padding:6rpx 0 10rpx;
  position: relative;
  clear: both;
  zoom: 1;
  .img{
    width: 18rpx;
    height: 18rpx;
    transform: rotate(45deg);
    background:$uni-orange;
    border-radius: 2rpx;
    position: absolute;
    top:-4rpx;
    right:30rpx;
  }
  .flex-item{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 54rpx;
    margin:0 20rpx;
    color:#fff;
    width:calc(25% - 40rpx);
    float: left;
    font-size: $uni-font-size-sm;
  }
}
.list-group-up-con:after{
  content:" ";
  display: block;
  height: 0;
  clear: both;
}
.qrcode-con{
  padding:40rpx;
  .popup-close{
    position: absolute;
    bottom:-55px;
    left:50%;
    margin-left: -15px;
  }
}
.slot-image {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  margin:10rpx 0;
  float: left;
  font-size:$uni-font-size-lg;
  color: $uni-text-color;
}
</style>
